<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>贪吃蛇</title>
    <link rel="stylesheet" href="../reset.css">
    <style>
        * {
            box-sizing: border-box;
        }

        #main {
            height: 420px;
            width: 360px;
            border: 10px #000 solid;
            background-color: #b7d4a8;
            border-radius: 20px;
            margin: 50px auto;
        }

        #stage {
            width: 304px;
            height: 304px;
            border: 2px #000 solid;
            margin: 20px auto;
            position: relative;
        }

        #snake>div {
            width: 10px;
            height: 10px;
            background-color: #000;
            position: absolute;
            border: 1px solid #b7d4a8;
        }

        #food {
            width: 10px;
            height: 10px;
            position: absolute;
            top: 100px;
            left: 100px;
            display: flex;
            flex-flow: row wrap;
        }

        #food>div {
            width: 5px;
            height: 5px;
            background-color: #000;
            transform: rotate(45deg);
        }

        #info {
            width: 304px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            font: bold 20px courier;
        }
        #snake:nth-child(2){
            background-color: red;
        }
    </style>
    <script>

        /* 

        要解决的问题：
            1.禁止掉头
            2.游戏终止
            3.记录分数
        
        */
        document.addEventListener("DOMContentLoaded", () => {

            // 获取蛇
            const snake = document.getElementById("snake")

            // 获取蛇的各个部分
            const snakes = snake.getElementsByTagName("div")

            // 获取蛇头
            const snakesHead = snakes[0];

            // 获取食物
            const food = document.getElementById("food")

            // 食物的宽度范围在[0-290],这里一定要是[0-29]*10的数
            function changeFood() {
                const x = Math.floor(Math.random() * 30) * 10;
                const y = Math.floor(Math.random() * 30) * 10;

                // 设置食物的坐标
                food.style.left = x + "px"
                food.style.top = y + "px"

            }

            changeFood()

            // 定义一个变量用来存储蛇移动的方向

            let dir
            const keyArr = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight",
                "w", "a", "s", "d",
                "W", "A", "S", "D"]

            document.addEventListener("keydown", (event) => {
                if (keyArr.includes(event.key)) {
                    // 设置方向
                    dir = event.key
                }

            })

            /* 
                要使得身体和头部一起移动时，只需要在蛇移动时，变换蛇尾部的位置。
            
            
            */
            // 初始化蛇的位置数组
            let snakePositions = [{ x: 0, y: 0 }];

            function moveSnake() {
                // 获取蛇头的新位置
                let newHeadPosition = { x: snakesHead.offsetLeft, y: snakesHead.offsetTop };

                switch (dir) {
                    case "ArrowUp":
                    case "w":
                    case "W":
                        newHeadPosition.y -= 10;
                        break;
                    case "ArrowDown":
                    case "s":
                    case "S":
                        newHeadPosition.y += 10;
                        break;
                    case "ArrowLeft":
                    case "a":
                    case "A":
                        newHeadPosition.x -= 10;
                        break;
                    case "ArrowRight":
                    case "d":
                    case "D":
                        newHeadPosition.x += 10;
                        break;
                }

                // 更新蛇的位置数组
                snakePositions.unshift(newHeadPosition);
                snakePositions.pop();

                // 更新蛇的每个部分的位置
                for (let i = 0; i < snakes.length; i++) {
                    snakes[i].style.left = snakePositions[i].x + "px";
                    snakes[i].style.top = snakePositions[i].y + "px";
                }

                // 检查蛇是否吃到食物
                if (newHeadPosition.x === food.offsetLeft && newHeadPosition.y === food.offsetTop) {
                    changeFood();
                    // 增加蛇的身体
                    const newPart = snakes[0].cloneNode(true);
                    snake.appendChild(newPart);
                    snakes[snakes.length - 1].style.left = snakePositions[snakePositions.length - 1].x + "px";
                    snakes[snakes.length - 1].style.top = snakePositions[snakePositions.length - 1].y + "px";
                    snakePositions.push({ x: snakePositions[snakePositions.length - 1].x, y: snakePositions[snakePositions.length - 1].y });
                }
            }

            setInterval(moveSnake, 200);
        })
    </script>
</head>

<body>
    <div id="main">
        <div id="stage">
            <div id="snake">
                <div></div>
            </div>
            <div id="food">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
        <div id="info">
            <div>
                SCORE: <span id="score">100</span>
            </div>
            <div>
                LEVEl: <span id="level">1</span>
            </div>
        </div>
    </div>
</body>

</html>